<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>电影管理</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        .layui-layout-body {
            overflow-y: scroll;
        }

        .img-area {
            margin: 10px;
            position: relative;
            width: 150px;
            height: 150px;
            margin-left: 110px;
        }

        .img-area::after {
            content: "";
            position: absolute;
            height: 20px;
            background: rgba(0, 0, 0, .5);
            top: 0;
            left: 0;
            width: 100%;
            border-radius: 5px 5px 0 0;
        }

        .img-area img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
            border-radius: 5px;
            border: 1px solid gray;
            box-sizing: border-box
        }

        .img-area i {
            position: absolute;
            right: 5px;
            top: 5px;
            color: aliceblue;
            z-index: 1;
            cursor: pointer;
        }
        .layui-layout-body {
            overflow-y: scroll;
        }
    </style>
</head>

<body class="layui-layout-body">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>
            <button data-target="student/select.html" class="layui-btn layui-btn-sm" id="back">返回</button>
            修改电影
        </legend>
    </fieldset>

    <form class="layui-form" action="" onsubmit="return false" lay-filter="movieEdit">
        <!-- //电影名称 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">电影名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="电影名称" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <!-- //英文名称 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">英文名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="ename" placeholder="英文名称" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <!-- //上传图片 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">海报图</label>
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="img-area">
                <img src="" alt="">
                <i class="layui-icon layui-icon-close"></i>
            </div>
        </div>
        <!-- lsc 增加 lay-filter -->
        <!-- //电影类型 -->
        <div class="layui-form-item">
            <label class="layui-form-label">电影类型</label>
            <div class="layui-input-block" id="movieType">
                <input type="checkbox" lay-filter="movieType" name="like[write]" title="爱情">
                <input type="checkbox" lay-filter="movieType" name="like[read]" title="喜剧">
                <input type="checkbox" lay-filter="movieType" name="like[dai]" title="动画">
                <input type="checkbox" lay-filter="movieType" name="like[read]" title="剧情">
                <input type="checkbox" lay-filter="movieType" name="like[dai]" title="恐怖">
                <input type="checkbox" lay-filter="movieType" name="like[read]" title="惊悚">
                <input type="checkbox" lay-filter="movieType" name="like[dai]" title="科幻">
                <input type="checkbox" lay-filter="movieType" name="like[read]" title="动作">
                <input type="checkbox" lay-filter="movieType" name="like[dai]" title="悬疑">
                <input type="checkbox" lay-filter="movieType" name="like[read]" title="犯罪">
                <input type="checkbox" lay-filter="movieType" name="like[dai]" title="冒险">
                <input type="checkbox" lay-filter="movieType" name="like[read]" title="战争">
                <input type="checkbox" lay-filter="movieType" name="like[dai]" title="奇幻">
                <input type="checkbox" lay-filter="movieType" name="like[read]" title="运动">
                <input type="checkbox" lay-filter="movieType" name="like[dai]" title="家庭">
                <input type="checkbox" lay-filter="movieType" name="like[read]" title="古装">
                <input type="checkbox" lay-filter="movieType" name="like[dai]" title="武侠">
                <input type="checkbox" lay-filter="movieType" name="like[read]" title="西部">
                <input type="checkbox" lay-filter="movieType" name="like[dai]" title="历史">
                <input type="checkbox" lay-filter="movieType" name="like[read]" title="传记">
                <input type="checkbox" lay-filter="movieType" name="like[dai]" title="歌舞">
                <input type="checkbox" lay-filter="movieType" name="like[read]" title="黑色电影">
                <input type="checkbox" lay-filter="movieType" name="like[dai]" title="短片">
                <input type="checkbox" lay-filter="movieType" name="like[read]" title="纪录片">
                <input type="checkbox" lay-filter="movieType" name="like[dai]" title="其他">
            </div>
        </div>
        <!-- //首映地区 -->
        <div class="layui-form-item">
            <label class="layui-form-label">首映地区</label>
            <div class="layui-input-block movieAddress" id="movieAddress">
                <input type="checkbox" lay-filter="movieAddress" lay-filter="movieAddress" name="like[write]" title="中国大陆">
                <input type="checkbox" lay-filter="movieAddress" name="like[read]" title="美国">
                <input type="checkbox" lay-filter="movieAddress" name="like[dai]" title="韩国">
                <input type="checkbox" lay-filter="movieAddress" name="like[read]" title="日本">
                <input type="checkbox" lay-filter="movieAddress" name="like[dai]" title="中国香港">
                <input type="checkbox" lay-filter="movieAddress" name="like[read]" title="中国台湾">
                <input type="checkbox" lay-filter="movieAddress" name="like[dai]" title="泰国">
                <input type="checkbox" lay-filter="movieAddress" name="like[read]" title="印度">
                <input type="checkbox" lay-filter="movieAddress" name="like[dai]" title="法国">
                <input type="checkbox" lay-filter="movieAddress" name="like[read]" title="英国">
                <input type="checkbox" lay-filter="movieAddress" name="like[dai]" title="俄罗斯">
                <input type="checkbox" lay-filter="movieAddress" name="like[read]" title="意大利">
                <input type="checkbox" lay-filter="movieAddress" name="like[dai]" title="西班牙">
                <input type="checkbox" lay-filter="movieAddress" name="like[read]" title="德国">
                <input type="checkbox" lay-filter="movieAddress" name="like[dai]" title="波兰">
                <input type="checkbox" lay-filter="movieAddress" name="like[read]" title="澳大利亚 ">
                <input type="checkbox" lay-filter="movieAddress" name="like[dai]" title="伊朗">
                <input type="checkbox" lay-filter="movieAddress" name="like[read]" title="其他">
            </div>
        </div>
        <!-- //时长 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">时长</label>
                <div class="layui-input-inline">
                    <input type="text" name="time" placeholder="请输入电影时长" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>分钟
        </div>
        <!-- //上映时间 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">上映时间</label>
                <div class="layui-input-block">
                    <input type="text" name="upDate" id="date1" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <!-- //评分 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">评分</label>
                <div class="layui-input-inline">
                    <input type="text" name="score" placeholder="请输入评分(0-10)" lay-verify="required" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
        </div>
        <!-- //票房 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">票房</label>
                <div class="layui-input-inline">
                    <input type="text" name="count" placeholder="请输入票房" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <!-- //文本域 -->
        <div class="layui-form-item">
            <div class="layui-inline"></div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">简介</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入电影简介" class="layui-textarea" name="intro"></textarea>
                </div>
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="btnsubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" lay-filter="btnreset">重置</button>
            </div>
        </div>
    </form>
    </fieldset>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script src="../../js/lodash.min.js"></script>


    <script>
        // 返回按钮
        $("#back").click(function () {
            location.href = "./index.html";
        });
        //得到地址中模糊查询中的参数
        function query(url) {
            const parts = url.split("?");
            if (parts.length == 1) {//地址中没有参数
                return {};
            }
            const obj = {};
            parts[1].split("&").map(item => item.split("=")).forEach(([p, v]) => {
                obj[p] = decodeURIComponent(v);
            });
            return obj;
        }

        layui.use(['form', 'layer', 'laydate', 'upload'], async function () {
            const form = layui.form;
            var upload = layui.upload;
            let layer = layui.layer;
            let laydate = layui.laydate
            //日期
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#date1'
            });

            const q = query(location.href);
            let movieid = q.id;
            const ms = await $.getJSON("/api/Movie/" + movieid);
            const moviesType = ms.data.type.split(",");
            const moviesArea = ms.data.area.split(",");
            //还没有解决  类型选中问题
            const address = [];

            [...$("#movieAddress").children()].forEach(element => {


                if (moviesArea.includes(element.title)) {
                    element.checked = "true";
                }

            });
            const type = [];
            const inputs = $("#movieType").children();
            [...$("#movieType").children()].forEach(element => {

                if (moviesType.includes(element.title)) {
                    element.checked = "true";
                }

            });






            $(".img-area img").prop("src", ms.data.poster)
            form.val("movieEdit", ms.data);

            //监听提交，添加课程事件绑定   未完成
            form.on('submit(btnsubmit)', async function (data) {

                data.field.type = typesMovie.toString() + ',' + moviesType.toString();

                if (data.field.type.charAt(data.field.type.length - 1) == ",") {
                    data.field.type = data.field.type.substring(0, data.field.type.lastIndexOf(','));
                }

                data.field.area = typesAddress.toString() + ',' + moviesArea.toString();
                if (data.field.area.charAt(data.field.area.length - 1) == ",") {
                    data.field.area = data.field.area.substring(0, data.field.area.lastIndexOf(','));
                }


                if (data.field.type != "" && data.field.area != "") {
                    console.log(data.field.type);
                    await $.ajax({
                        url: "/api/Movie/" + movieid,
                        method: "put",
                        data: data.field
                    });
                    layer.msg('修改电影成功', {
                        icon: 1,
                        time: 1000
                    }, function () {
                        location.href = "./index.html";
                    });
                } else {
                    if (data.field.type == "") {
                        layer.msg('至少选择一个电影类型', {
                            icon: 0,
                            time: 1000
                        });
                    }
                    if (data.field.area == "") {
                        layer.msg('至少选择一个首映地址', {
                            icon: 0,
                            time: 1000
                        });
                    }
                }
                await $.ajax({
                    url: "/api/Movie/" + movieid,
                    method: "put",
                    data: data.field
                });


            });

            // //添加 电影类型和首映地址
            let typesMovie = [];
            form.on('checkbox(movieType)', function (data) {

                if (data.elem.checked) {
                    typesMovie.push(data.elem.title);

                } else {
                    _.pull(typesMovie, data.elem.title);
                }
                if (moviesType.includes(data.elem.title)) {
                    data.elem.checked = "false";
                    _.pull(moviesType, data.elem.title);
                }
            });
            let typesAddress = [];
            form.on('checkbox(movieAddress)', function (data) {

                if (data.elem.checked) {
                    typesAddress.push(data.elem.title);

                } else {
                    _.pull(typesAddress, data.elem.title);
                }
                if (moviesArea.includes(data.elem.title)) {
                    data.elem.checked = "false";
                    _.pull(moviesArea, data.elem.title);
                }

            });


            //执行实例
            let uploadInst = upload.render({
                elem: '#test1', //绑定元素
                url: '/api/upload/', //上传接口
                field: "imgfile",
                acceptMime: "image/*",  //只寻找图片文件
                size: 500,      //上传限制500KB
                multiple: true, //多图上传
                drag: true,  //支持拖拽上传
                done: function (res) {
                    //上传完毕回调
                    console.log(res.data[0])
                    $(".img-area img").prop("src", res.data[0]);
                    $(".img-area").show()
                }
                , error: function () {
                    //请求异常回调
                    console.log("错误")
                }
            });
            $(".img-area i").click(function () {
                $(".img-area img").prop("src", "");
                $(".img-area").hide();
            })

        });

    </script>
    <script>


    </script>
</body>

</html>